<template>
	<view>
		<uamhead :title="title"></uamhead>
		<searchHot></searchHot>
		<view class="list-head">
			<view class="list-head-img">
				<image :src="playlist.coverImgUrl" mode=""></image>
				<text class="iconfont iconyousanjiao">{{ playlist.playCount  }}</text>
			</view>
			<view class="list-head-text">
				<view>{{ playlist.name }}</view>
				<view>{{ playlist.description }}</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-Y">
			<view v-show="isShow" class="music-common">
				<text class="iconfont iconbofang1"></text>
				<text>播放全部(共{{playlist.trackCount}}首) </text>
			</view>
			<view class="list-music">
				<view class="list-music-item" v-for="(musicItem,index) in playlist.tracks" :key="musicItem.id"
					@tap="navPlayer(musicItem.id)">
					<span>{{index+1}}</span> <text>{{musicItem.name}}</text>
					<view class="index-list-name">
						<image v-if="privileges[index].flag > 60 && privileges[index].flag < 70"
							src="../../static/iamges/dujia.png"></image>
						<image v-if="privileges[index].maxbr ==999000" src="../../static/iamges/sq.png"></image>
						{{musicItem.ar[0].name}}{{musicItem.name}}
						<text class="iconfont iconbofang"></text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		list
	} from '../../common/api.js'
	
	export default {
		data() {
			return {
				title: '',
				playlist: {
					coverImgUrl: '',
					trackCount: '',
					creator: ''
				},
				privileges: [],
				isShow: false
			}
		},
		onLoad(options) {
			let listid = options.id;
			list(listid).then((res) => {
				if (res.data.code == '200') {
					this.title = res.data.playlist.name
					this.playlist = res.data.playlist
					this.privileges = res.data.privileges
					this.isShow = true
				};
				console.log(res);
			})
		},
		methods: {
			navPlayer(id) {
				uni.navigateTo({
					url: '/pages/player/player?id=' + id
				})
				console.log("id="+id)
			},
		}
	}
</script>

<style>
	.list-head {
		display: flex;
		margin: 30rpx;
	}

	.music-common {
		margin: 55px 0 55px 10px;
	}

	.music-common text {
		font-size: 24px;
	}

	.list-head-img {
		width: 265rpx;
		height: 265rpx;
		border-radius: 15rpx;
		margin-right: 40rpx;
		overflow: hidden;
		position: relative;
	}

	.list-head-img image {
		width: 100%;
		height: 100%;
	}

	.music-common img {
		width: 25px;
		height: 25px;
	}

	.list-head-img text {
		position: absolute;
		font-size: 24rpx;
		color: white;
		right: 8rpx;
		top: 8rpx;
	}

	.list-head-text {
		flex: 1;
		font-size: 24rpx;
		color: #c3d1e3;
	}

	.list-head-text image {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
	}

	.list-music-item {
		position: relative;
		font-size: 20px;
		margin: 30px 0 30px 20px;
	}

	.list-music-item span {
		position: absolute;
		left: 5px;
		top: 10px;
	}

	.list-music-item text {
		margin-left: 42px;
	}

	.index-list-name {
		position: relative;
	}

	.index-list-name img {
		width: 30px;
		height: 30px;
		float: right;
	}

	.index-list-name image {
		width: 25px;
		height: 20px;
		margin-left: 42px;
	}

	.index-list-name text {
		position: absolute;
		right: 0px;
		top: -25px;
		/* float: right; */
	}


	/* .index-list-text span:hover{
		background-color: #808080;
		cursor:pointer ;
	} */
</style>
